/* Copyright © Chennan All rights reserved.
 * This source code is Written by Chennan in CE·Chengdu.
 * You can use it with permission from the author. */

.saf-cn-fullpage > .swiper-container{width:100%; height:100vh;max-height:1440px;}
.saf-cn-fullpage > .swiper-container > .swiper-wrapper {display:flex;flex-wrap:wrap;width:100%;  }
.saf-cn-fullpage > .swiper-container > .swiper-wrapper > .swiper-slide { background:#fff;  position:relative; display:flex; align-items:center;  overflow:hidden; transform:translate(0,-100px) scale(0.9); transition:all 0.5s; z-index:1;}
.saf-cn-fullpage > .swiper-container > .swiper-wrapper > .swiper-slide.swiper-slide-active {transform:translate(0,0) scale(1); z-index:3;}
.saf-cn-fullpage > .swiper-container > .swiper-wrapper > .swiper-slide > div {position:relative;z-index:4;}

.saf-cn-fullpage  > .swiper-container > .swiper-wrapper > .swiper-slide:before {transform:scale(1.3); transition:all 10s; position:absolute; width:100%; height:100%; left:0; top:0;z-index:1;}
.saf-cn-fullpage  > .swiper-container > .swiper-wrapper > .swiper-slide.swiper-slide-active:before {transform:scale(1);}

.cn_pagination{ position:fixed; right:15px; top:50%;z-index:99; counter-reset: saf-cn-figure;}
.cn_pagination span {display:block; width:6px; height:6px; border-radius:5px;background:#000;opacity:0.4; transition:all 0.8s; margin:10px 0; position:relative;}
.cn_pagination span.swiper-pagination-bullet-active {height:30px; background:linear-gradient(to bottom,#69af33,#218ccc);opacity:1;}

/*翻屏组件自动编号*/
.cn_pagination span:before {  counter-increment: saf-cn-figure; content: counter(saf-cn-figure, decimal-leading-zero);color:#218ccc; opacity:0;font-size:12px; position:absolute; right:15px; top:100%; transform:translate(0,-50%);transition:all 0.8s; width:max-content; display:none;}
.cn_pagination span.swiper-pagination-bullet-active:before {opacity:0.8;top:50%;}


/* 
* 此为翻屏组件动效样式库，里面含有一些常见的动画效果，
* 引用对应class类名即可实现翻屏页面元素的动画效果。
*/
 
.saf-ltr {animation:fadeOutLeft 1s 1s both;}
.swiper-slide-active .saf-ltr {animation:fadeInLeft 1s 1s both;}

.saf-rtl {animation:fadeOutRight 1s 1s both;}
.swiper-slide-active .saf-rtl {animation:fadeInRight 1s 1s both;}

.saf-ttd {animation:fadeOutDown 1s 1s both;}

.swiper-slide-active .saf-ttd {animation:fadeInUp 1s 1s both;}
.swiper-slide-active .saf-d-1 {animation-delay:1.1s;}
.swiper-slide-active .saf-d-2 {animation-delay:1.2s;}
.swiper-slide-active .saf-d-3 {animation-delay:1.3s;}
.swiper-slide-active .saf-d-4 {animation-delay:1.4s;}
.swiper-slide-active .saf-d-5 {animation-delay:1.5s;}
.swiper-slide-active .saf-d-6 {animation-delay:1.6s;}
.swiper-slide-active .saf-d-7 {animation-delay:1.7s;}
.swiper-slide-active .saf-d-8 {animation-delay:1.8s;}
.swiper-slide-active .saf-d-9 {animation-delay:1.9s;}
.swiper-slide-active .saf-d-10 {animation-delay:2s;}
.swiper-slide-active .saf-d-11 {animation-delay:2.1s;}
.swiper-slide-active .saf-d-12 {animation-delay:2.2s;}
.swiper-slide-active .saf-d-13 {animation-delay:2.3s;}
.swiper-slide-active .saf-d-14 {animation-delay:2.4s;}
.swiper-slide-active .saf-d-15 {animation-delay:2.5s;}

.cn-make .saf-ani {animation:none !important;}

@media (max-width:798px) { 
   .saf-ani {animation:none !important;}
}
@media (min-width:799px) and (max-width: 1024px) { 
}